<template>
	<view class="details">
		<Header></Header>
		<div class="container">
			<div class="product_info">
				天翼5G极速80G套餐，大胆用、放心玩。500M宽带全家享，更有限时白金会员权益！
			</div>
			<div class="product_detail">
				<div class="btn_product_open">
					<span>商品图文详情</span>
					<img src="./img/icon_open.png" class="btn_product_open_img">
				</div>
				<div class="product-tc">
					<div class="product-tc_title">
						<span>套餐详情
							<i>
								<img src="./img/biaoti_bg.png">
							</i>
						</span>
					</div>
					<table>
						<tbody>
							<tr>
								<th>套餐类型</th>
								<td>
									<div>城中村5G融合套餐</div>
									<div>(优惠推荐)</div>
								</td>
							</tr>
							<tr>
								<th>套餐价格</th>
								<td>
									<div>预存300元话费</div>
									<div>一年内月供114元</div>
								</td>
							</tr>
							<tr>
								<th>套餐内容</th>
								<td>
									<div>国内时长：300分钟</div>
									<div>国内流量：每月畅享40G流量</div>
								</td>
							</tr>
							<tr>
								<th>宽带服务</th>
								<td>包含200M光纤使用</td>
							</tr>
							<tr>
								<th>光纤接入费</th>
								<td>100元光纤接入费(借用光纤猫)</td>
							</tr>
						</tbody>
					</table>
					<ul>
						<span>注：</span>
						<li>
							<p>
								<span>交费：</span>支持先装后付款，当天下单当天装
							</p>
						</li>
						<li>
							<p>
								<span>副卡：</span>可配两张副卡免副卡月租，共享套餐服务（若不需要副卡,可只开主卡）</p>
						</li>
						<li>
							<p>
								<span>优惠：</span>加微信客服 选靓号享员工优惠，可领100元微信红包或送20000HAM充电宝</p>
						</li>
						<li>
							<p>
								推荐奖励：凡在本店办理成功的老客户，推荐新客户办理此套餐并办理成功者，可获微信红包50元</p>
						</li>
						</li>
					</ul>
				</div>
			</div>
			<div class="product_bottom">
				<div class="buy">
					<button @click="order(2)">立即购买</button>
				</div>
			</div>
		</div>
		<!-- <CzcItem v-if='type===1'></CzcItem>
		<XqItem v-if='type===2'></XqItem>
		<SyItem v-if='type===3'></SyItem> -->

	</view>
</template>

<script>
	import Header from './../header'
	// import CzcItem from './../index/czcItem'
	// import XqItem from './../index/xqItem'
	// import SyItem from './../index/syItem'

	export default {
		data() {
			return {
				id: '',
				type: 1
			}
		},
		components: {
			// CzcItem,
			// XqItem,
			// SyItem,
			Header
		},
		onLoad(e) {
			console.log(e);
		},
		methods: {
			order(orderId) {
				// console.log('orderId', orderId)
				getApp().globalData.userInfo.option = orderId
				uni.switchTab({
					url: '/pages/order/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.details {
		background: #f5f5f5;
		margin-bottom: 100rpx;
	}

	.container {
		padding: 20rpx;
	}

	.product_info {
		height: 94*2rpx;
		line-height: 50rpx;
		padding: 20rpx;
		border: 1rpx solid #dedede;
		margin-bottom: 10rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		font-size: 18*2rpx;
	}

	.product_detail {
		background-color: #FFFFFF;
		border: 1rpx solid #dedede;
	}

	.btn_product_open {
		height: 50*2rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #dedede;
		padding: 0 8*2rpx 0 0;

		span {
			flex: 1;
			text-align: center;
			color: #c9040e;
			font-size: 18*2rpx;
		}

		.btn_product_open_img {
			width: 40rpx;
			height: 20rpx;
		}
	}

	.product-tc {
		background-color: #FFFFFF;
		font-size: 16*2rpx;

		.product-tc_title {
			margin-bottom: 15*2rpx;

			span {
				background: #ff7920;
				height: 30*2rpx;
				line-height: 30*2rpx;
				display: inline-block;
				padding-left: 10*2rpx;
				padding-right: 10*2rpx;
				font-size: 16*2rpx;
				font-weight: bold;
				color: #FFF;
				position: relative;
				z-index: 2;
			}

			i {
				display: inline-block;
				width: 10*2rpx;
				height: 30*2rpx;
				position: absolute;
				right: -10*2rpx;
				top: 0;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		table {
			width: 96%;
			border-collapse: collapse;
			margin-left: 2%;
			margin-right: 2%;
			// background: #e1cc92;
			margin-bottom: 15*2rpx;
			font-size: 16*2rpx;

			tbody {

				tr {

					th {
						min-width: 100*2rpx;
						border: 1rpx solid #e1cc92;
						background: #fffacd;
						height: 28*2rpx;
						line-height: 18*2rpx;
						padding-top: 3*2rpx;
						padding-bottom: 3*2rpx;
						font-size: 14*2rpx;
						text-align: center;
						color: #898989;
						box-sizing: border-box;
					}

					td {
						border: 1rpx solid #e1cc92;
						background: #ffffff;
						min-height: 28*2rpx;
						text-align: center;
						color: #636262;
						font-weight: 300;
						padding: 4rpx 0;

						div {
							height: 22*2rpx;
							line-height: 22*2rpx;
						}


					}
				}
			}
		}
	}

	ul {
		list-style: none;
		line-height: 30*2rpx;
		margin: 0;
		padding: 0;
		padding-left: 10rpx;
		padding-right: 10rpx;


		span {
			color: #4d4c4c;
			font-size: 16*2rpx;
		}

		li {
			margin: 0;
			padding: 0;
			list-style: none;
			margin-left: 25*2rpx;
			// list-style: decimal;
			line-height: 28*2rpx;
			font-size: 16*2rpx;
			font-weight: 300;
			margin-bottom: 8*2rpx;

			p {
				margin: 0;
				padding: 0;
				font-size: 14*2rpx;
				line-height: 24*2rpx;

				span {
					font-size: 34rpx;
					color: #000;
					font-weight: bold;
				}

			}
		}
	}

	.product_bottom {
		display: flex;
		justify-content: flex-end;
		background-color: #FFF;
		width: 100%;
		padding-top: 4px;
		padding-bottom: 4px;
		border-top: 2px solid #dedede;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;

		.buy {
			width: 168*2rpx;
			margin-right: 11*2rpx;

			button {
				display: block;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #bc121b;
				color: #fff;
				font-size: 32rpx;
				font-family: "Microsoft YaHei UI";
				border-radius: 5*2rpx;
			}
		}
	}
</style>
